<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { NModal, NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui'
  import ModalHeader from '@/components/ModalHeader/index.vue'
  import { getUserList } from '@/api/user'
  onMounted(async () => {
    await getUserListFn()
  })
  const showModal = ref(false)
  const auditUserList = ref([])
  const handleOpen = () => {
    form.value.auditUser = undefined
    form.value.remark = ''
    showModal.value = true
  }
  const handleClose = () => {
    showModal.value = false
  }
  const form = ref({
    auditUser: undefined,
    remark: '',
  })
  const rules = ref({
    auditUser: [{ required: true, message: '请选择审核员' }],
  })

  const getUserListFn = async () => {
    const res = await getUserList({
      userType: 1,
    })
    auditUserList.value = res.map((item: any) => ({
      label: item.nickname,
      value: item.id,
    }))
  }

  const emit = defineEmits(['submit'])

  const formRef = ref()
  const handleSubmit = () => {
    formRef.value?.validate((errors: any) => {
      if (!errors) {
        emit('submit', form.value)
      }
    })
  }
  defineExpose({
    handleOpen,
  })
</script>

<template>
  <n-modal
    style="width: 528px"
    :bordered="false"
    role="dialog"
    aria-modal="true"
    v-model:show="showModal"
    transform-origin="center"
    @close="handleClose"
  >
    <div class="w-full h-full flex flex-col bg-white rounded pingfang">
      <ModalHeader title="提交审核" @close="handleClose" />
      <n-form
        class="flex-1 px-5"
        ref="formRef"
        :model="form"
        :rules="rules"
        require-mark-placement="left"
      >
        <n-form-item label="审核员" path="auditUser">
          <n-select
            v-model:value="form.auditUser"
            placeholder="请选择审核员"
            :options="auditUserList"
          />
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input
            type="textarea"
            show-count
            max-length="20"
            :autosize="{ minRows: 2, maxRows: 2 }"
            v-model:value="form.remark"
          />
        </n-form-item>
      </n-form>
      <div class="flex justify-end px-5 py-4">
        <n-button class="w-[60px] mr-4 text-[#4A5055]" @click="handleClose"> 取消 </n-button>
        <n-button type="primary" class="w-[60px]" @click="handleSubmit"> 确认 </n-button>
      </div>
    </div>
  </n-modal>
</template>
<style lang="less" scoped></style>
